<template>
  <div class="home">
    <h1 id="#test">count---{{count}}</h1>
    <h1 id="#test">state.count---{{state.count}}</h1>
    <button @click="addCount">count+</button>
    <button @click="addStateCount">state.count+</button>
    <h3 v-if="countComputed">计算属性</h3>
    <hr>
    <h1>姓名----{{person.name}}</h1>
    <h1>性别----{{person.sex}}</h1>
    <ul>
      <li v-for="item in person.hobby" :key="item">{{item}}</li>
    </ul>
    <button @click="handleData">操作数据</button>
  </div>
</template>

<script setup lang="ts">
  //#regoin
  //ref和reactive的区别
  //ref定义基本数据类型，reactive定义引用数据类型
  //ref定义的值用.value来取
  import { ref,nextTick ,onMounted, reactive,computed} from 'vue'
  onMounted(()=>{
    console.log('挂载完成');
  })
  let count=ref(0) //ref包裹基本数据类型数据后返回的是一个RefImpl实例对象实现响应式，需要使用.value取值，引用数据类型返回的是proxy对象实现响应式
  let state=reactive({count:1})//reactive包裹的引用数据类型返回一个Proxy的实例对象，实现数据响应式
  let hooby=reactive(['抽烟','喝酒','烫头'])
  let person=reactive({
    name:'lz',
    sex:'男',
    hobby:['抽烟','喝酒','烫头']
  })
  async function addCount(){
    console.log(count);
    console.log(hooby,'hooby');
    count.value++
    console.log(document.getElementById('#test')?.textContent,'dom更新前');
    await nextTick()
    console.log(document.getElementById('#test')?.textContent,'dom更新后');
  }
  function addStateCount(){
    state.count++
  }
  function handleData(){

  }
  const  countComputed=computed(()=>{
    return state.count%2===0
  })
</script>
